<!DOCTYPE html>
<html>
<head>
    <title>Quantum Potential Well</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Clear background to white
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Set drawing styles to match the hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round';

        // Center the coordinate system
        const centerX = canvas.width / 2;
        const centerY = canvas.height * 0.7;
        
        ctx.save();
        ctx.translate(centerX, centerY);

        // 1. Draw Axes
        const axisXLength = 180;
        const axisYLength = 150;

        // X-axis
        ctx.beginPath();
        ctx.moveTo(-axisXLength, 0);
        ctx.lineTo(axisXLength, 0);
        ctx.stroke();

        // X-axis arrowhead
        ctx.beginPath();
        ctx.moveTo(axisXLength, 0);
        ctx.lineTo(axisXLength - 12, -6);
        ctx.moveTo(axisXLength, 0);
        ctx.lineTo(axisXLength - 12, 6);
        ctx.stroke();

        // Y-axis
        ctx.beginPath();
        ctx.moveTo(0, 10); // Start slightly below origin to meet curve smoothly
        ctx.lineTo(0, -axisYLength);
        ctx.stroke();

        // Y-axis arrowhead
        ctx.beginPath();
        ctx.moveTo(0, -axisYLength);
        ctx.lineTo(-6, -axisYLength + 12);
        ctx.moveTo(0, -axisYLength);
        ctx.lineTo(6, -axisYLength + 12);
        ctx.stroke();

        // 2. Draw the Parabolic Potential Well
        ctx.beginPath();
        const a = 0.008; // Coefficient to control the width of the parabola
        const x_max = 120; // How far the parabola extends horizontally
        
        for (let x = -x_max; x <= x_max; x++) {
            const y = -a * x * x; // Use negative because canvas y-axis is inverted
            if (x === -x_max) {
                ctx.moveTo(x, y);
            } else {
                ctx.lineTo(x, y);
            }
        }
        ctx.stroke();

        // 3. Add Labels
        // Font for mathematical symbols
        ctx.font = "italic 22px 'Times New Roman'";
        
        // V(x) label
        ctx.textAlign = 'center';
        ctx.fillText("V(x)", 0, -axisYLength - 10);

        // x label
        ctx.textAlign = 'left';
        ctx.fillText("x", axisXLength + 10, 8);
        
        // t < 0 label
        ctx.fillText("t < 0", 110, -120);

        // Restore the original drawing context state
        ctx.restore();

        // 4. Add Figure Caption
        ctx.font = "18px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.fillText("Fig. 5.26", centerX, canvas.height - 30);
    </script>
</body>
</html>